[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { LogoGenerator } from "@/components/logo-generator" import { SiteHeader } from "@/components/site-header" import { SiteFooter } from "@/components/site-footer" export default function Page() { const [demoMode, setDemoMode] = useState(true) return (

) } [V0_FILE]typescriptreact:file="components/logo-generator.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Download, Loader2, RotateCw } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import { Toaster } from "@/components/ui/toaster" import { Button } from "./ui/button-custom" import { Textarea } from "./ui/textarea-custom" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" const ALL_LOGOS = [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tetrahedron9-Y3pXUcOEVxS1uigCghBiFQ5AKgmJyb.svg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tetrahedron2-8DYgGIGSuIi9Et0nAls0ZMNeHN1BWa.svg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tetrahedron3-wqYE1vqaP99GwdpvrZup9RDuZcjY2Q.svg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tetrahedron10-MMdk3W31ODyUVOAKVawn22UEIIfw0G.svg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tetrahedron1-bkrfihf4FsFs5PL0C8EkW8W983v5jG.svg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tetrahedron11-kmyEVfO8VUZIZXMukaEkTmtsDjq04O.svg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tetrahedron4-jMcU4p1IeQaXkBlh20I3T5KVY2Ywlu.svg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tetrahedron8-gC3T49KPFyfTxlN7XkPw2l2JNNRZRs.svg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tetrahedron6-al98PbDKSJ6QxDw9rZiDHWbIUQJnSd.svg", ] function getRandomItems(array: string[], n: number): string[] { const shuffled = [...array].sort(() => Math.random() - 0.5) return shuffled.slice(0, n) } const DEMO_TEXT = "tetrahedron, so demure, so mindful" interface LogoGeneratorProps { demoMode: boolean } export function LogoGenerator({ demoMode }: LogoGeneratorProps) { const [prompt, setPrompt] = useState("") const [svgs, setSvgs] = useState<(string | null)[]>([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [reloading, setReloading] = useState([]) const [usedLogos, setUsedLogos] = useState>(new Set()) const [selectedLogo, setSelectedLogo] = useState(null) const [isTyping, setIsTyping] = useState(true) const { toast } = useToast() // Simulate typing effect useEffect(() => { if (!isTyping) return let currentIndex = 0 const typingInterval = setInterval(() => { if (currentIndex <= DEMO_TEXT.length) { setPrompt(DEMO_TEXT.slice(0, currentIndex)) currentIndex++ } else { setIsTyping(false) clearInterval(typingInterval) } }, 50) return () => clearInterval(typingInterval) }, [isTyping]) const simulateLoading = async () => { setLoading(true) setSvgs([null, null, null, null]) setUsedLogos(new Set()) const initialLogos = getRandomItems(ALL_LOGOS, 4) const times = Array(4) .fill(0) .map(() => Math.random() * 2000) const loadImages = times.map( (time, index) => new Promise((resolve) => { setTimeout(() => { setSvgs((current) => { const newSvgs = [...current] newSvgs[index] = initialLogos[index] return newSvgs }) setUsedLogos((current) => { const updated = new Set(current) updated.add(initialLogos[index]) return updated }) resolve() }, time) }), ) await Promise.all(loadImages) setLoading(false) } const regenerateImage = async (index: number) => { if (!demoMode) return setReloading((prev) => [...prev, index]) const delay = Math.random() * 2000 await new Promise((resolve) => setTimeout(resolve, delay)) const availableLogos = ALL_LOGOS.filter((logo) => !usedLogos.has(logo)) if (availableLogos.length === 0) { const currentLogos = new Set(svgs.filter(Boolean)) setUsedLogos(currentLogos) const newAvailableLogos = ALL_LOGOS.filter((logo) => !currentLogos.has(logo)) const newLogo = newAvailableLogos[Math.floor(Math.random() * newAvailableLogos.length)] setSvgs((current) => { const newSvgs = [...current] newSvgs[index] = newLogo return newSvgs }) setUsedLogos((current) => { const updated = new Set(current) updated.add(newLogo) return updated }) } else { const newLogo = availableLogos[Math.floor(Math.random() * availableLogos.length)] setSvgs((current) => { const newSvgs = [...current] newSvgs[index] = newLogo return newSvgs }) setUsedLogos((current) => { const updated = new Set(current) updated.add(newLogo) return updated }) } setReloading((prev) => prev.filter((i) => i !== index)) } const generateLogos = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) setError(null) setSvgs([null, null, null, null]) if (demoMode) { await simulateLoading() return } try { const promises = Array(4) .fill(null) .map(() => fetch("/api/generate", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ prompt }), }).then((res) => res.json()), ) const results = await Promise.all(promises) const newSvgs = results.map((data) => { if (!data.success) throw new Error(data.error || "Failed to generate logo") return data.svg }) setSvgs(newSvgs) } catch (err) { setError(err instanceof Error ? err.message : "Something went wrong") setSvgs([]) } finally { setLoading(false) } } const downloadSvg = (svg: string, index: number) => { const blob = new Blob([svg], { type: "image/svg+xml" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `logo-${index + 1}.svg` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } const handleTextareaChange = (e: React.ChangeEvent) => { setIsTyping(false) setPrompt(e.target.value) } return ( <>

{!svgs.length ? ( <>

Make Your Logo Pop

Create unique logos with AI, optimized for web and print

<div className="space-y-3">
                <Button type="submit" disabled={loading || !prompt} className="w-full">
                  {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : "Generate"}
                </Button>
                <div className="flex items-center justify-center gap-2 text-sm text-gray-400">
                  <span>Powered by</span>
                  <a
                    href="https://replicate.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-white hover:text-gray-300 transition-colors flex items-center gap-2"
                  >
                    <img
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/replicate-n1lrbIHMLS1ftl4xVZyzhpaCOnizOj.svg"
                      alt="Replicate"
                      className="h-4 w-4"
                    />
                    <span>Replicate</span>
                  </a>
                </div>
              </div>
            </form>
          </>
        ) : (
          <div className="space-y-6">
            <div className="grid grid-cols-2 gap-6 w-full max-w-sm mx-auto">
              {svgs.map((svg, i) => (
                <div key={i} className="relative group">
                  {!svg || reloading.includes(i) ? (
                    <div className="w-full aspect-square animate-pulse bg-gray-800/50 rounded-xl backdrop-blur-sm scale-90" />
                  ) : (
                    <div
                      className="w-full aspect-square bg-white rounded-xl flex items-center justify-center relative scale-90 shadow-2xl shadow-blue-900/5 cursor-pointer"
                      onClick={() => setSelectedLogo(svg)}
                    >
                      {demoMode ? (
                        <img
                          src={svg || "/placeholder.svg"}
                          alt={`Generated Logo ${i + 1}`}
                          className="w-full rounded-xl h-full mx-auto"
                        />
                      ) : (
                        <div
                          className="w-full rounded-xl h-full mx-auto overflow-hidden"
                          dangerouslySetInnerHTML={{ __html: svg }}
                        />
                      )}
                      <div className="absolute top-2 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button
                          onClick={(e) => {
                            e.stopPropagation()
                            regenerateImage(i)
                          }}
                          className="p-2 bg-black/90 rounded-lg hover:bg-black backdrop-blur-sm transition-colors"
                          aria-label="Regenerate Logo"
                        >
                          <RotateCw className="h-4 w-4 text-white" />
                        </button>
                        <button
                          onClick={(e) => {
                            e.stopPropagation()
                            svg && downloadSvg(svg, i)
                          }}
                          className="p-2 bg-black/90 rounded-lg hover:bg-black backdrop-blur-sm transition-colors"
                          aria-label="Download Logo"
                        >
                          <Download className="h-4 w-4 text-white" />
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}

{error && (
          <div className="text-red-400 text-center mt-4 p-4 rounded-lg bg-red-500/10 backdrop-blur-sm">{error}</div>
        )}
      </div>

<Dialog className="border-none rounded-xl" open={!!selectedLogo} onOpenChange={() => setSelectedLogo(null)}>
        <DialogContent className="border-none max-w-xs rounded-xl bg-[#232323] text-white">
          <DialogHeader>
            <DialogTitle>Logo Preview</DialogTitle>
            <DialogDescription>View and download your generated logo</DialogDescription>
          </DialogHeader>
          <div className="bg-white rounded-lg">
            {selectedLogo && (
              <div className="relative aspect-square">
                {demoMode ? (
                  <img
                    src={selectedLogo || "/placeholder.svg"}
                    alt="Selected Logo"
                    className="w-full h-full rounded-xl object-contain"
                  />
                ) : (
                  <div dangerouslySetInnerHTML={{ __html: selectedLogo }} className="w-full h-full" />
                )}
              </div>
            )}
          </div>
          <div className="flex justify-center">
            <Button
              onClick={() => selectedLogo && downloadSvg(selectedLogo, svgs.indexOf(selectedLogo))}
              className="w-full sm:w-auto"
            >
              <Download className="mr-2 h-4 w-4" />
              Download Logo
            </Button>
          </div>
        </DialogContent>
      </Dialog>

<Toaster />
    </>
  )
}

[V0_FILE]typescriptreact:file="components/site-footer.tsx" isEdit="true" isMerged="true"
import { Command } from 'lucide-react'

export function SiteFooter() {
  return (
    <footer className="border-t border-white/[0.08] bg-black/50 py-12 mt-8 backdrop-blur-xl">
      <div className="container flex flex-col items-center gap-4">
        <nav className="flex gap-8 text-sm">
          <a href="#" className="text-gray-400 hover:text-white transition-colors">
            Privacy Policy
          </a>
          <a href="#" className="text-gray-400 hover:text-white transition-colors">
            Terms of Service
          </a>
          <a href="#" className="text-gray-400 hover:text-white transition-colors">
            Contact
          </a>
        </nav>
        <p className="text-sm text-gray-500">
          © 2024 Logo Maker. All rights reserved.
        </p>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="components/ui/button-custom.tsx" isMerged="true"
import * as React from "react"
import { cn } from "@/lib/utils"

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'outline'
  size?: 'default' | 'icon'
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "default", size = "default", ...props }, ref) => {
    return (
      <button
        className={cn(
          "relative inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-400 disabled:pointer-events-none disabled:opacity-50",
          variant === "default" && "bg-gradient-to-r from-blue-600 to-blue-500 text-white hover:from-blue-500 hover:to-blue-400 shadow-lg shadow-blue-900/20",
          variant === "outline" && "border border-gray-800 bg-black/50 text-gray-300 hover:bg-gray-800 backdrop-blur-sm",
          size === "default" && "h-12 rounded-lg px-6 text-sm",
          size === "icon" && "h-10 w-10 rounded-full",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

[V0_FILE]typescriptreact:file="components/ui/textarea-custom.tsx" isMerged="true"
import * as React from "react"
import { cn } from "@/lib/utils"

export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
    return (
      <textarea
        className={cn(
          "flex min-h-[120px] w-full rounded-lg border border-gray-800 bg-black/50 px-4 py-3 text-base text-white placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-400 disabled:cursor-not-allowed disabled:opacity-50 backdrop-blur-sm shadow-lg shadow-black/20",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="components/site-header.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Command } from "lucide-react"
import { Button } from "./ui/button-custom"
import { ToggleSwitch } from "./ui/toggle-switch"

interface SiteHeaderProps {
  demoMode: boolean
  setDemoMode: (value: boolean) => void
}

export function SiteHeader({ demoMode, setDemoMode }: SiteHeaderProps) {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 border-b border-white/[0.08] bg-black/50 backdrop-blur-xl">
      <div className="container flex h-16 items-center px-6">
        <Link href="/" className="flex items-center gap-2 mr-6 group">
          <div className="p-2 rounded-xl bg-gradient-to-br from-blue-600 to-blue-500 shadow-lg shadow-blue-900/20 group-hover:shadow-blue-900/30 transition-shadow">
            <Command className="h-5 w-5 text-white" />
          </div>
          <span className="font-bold text-white text-lg">Logo Maker</span>
        </Link>
        <nav className="flex items-center gap-8">
          <Link href="#" className="text-sm text-gray-400 hover:text-white transition-colors">
            Gallery
          </Link>
          <Link href="#" className="text-sm text-gray-400 hover:text-white transition-colors">
            Pricing
          </Link>
          <Link href="#" className="text-sm text-gray-400 hover:text-white transition-colors">
            Help
          </Link>
        </nav>
        <div className="ml-auto flex items-center gap-4">
          <ToggleSwitch checked={demoMode} onCheckedChange={setDemoMode} label="Demo Mode" />
          <Button variant="outline">Sign In</Button>
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/ui/toggle-switch.tsx" isMerged="true"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

interface ToggleSwitchProps {
  checked: boolean
  onCheckedChange: (checked: boolean) => void
  label: string
}

export function ToggleSwitch({ checked, onCheckedChange, label }: ToggleSwitchProps) {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="demo-mode" checked={checked} onCheckedChange={onCheckedChange} />
      <Label htmlFor="demo-mode" className="text-sm text-gray-400">
        {label}
      </Label>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/api/generate/route.ts" isEdit="true"
import { replicate } from "@ai-sdk/replicate"
import { experimental_generateImage as generateImage } from "ai"

export async function POST(req: Request) {
  try {
    const { prompt } = await req.json()

const { image } = await generateImage({
      model: replicate.image("recraft-ai/recraft-v3-svg"),
      prompt: prompt,
    })

// Convert Uint8Array to string
    const svgString = new TextDecoder().decode(image.uint8Array)

// Remove width and height attributes from the SVG
    const cleanedSvg = svgString
      .replace('width="1024"', 'width="100%"')
      .replace('height="1024"', 'height="100%"')

return Response.json({
      success: true,
      svg: cleanedSvg,
    })
  } catch (error) {
    console.error(error)
    return Response.json(
      {
        success: false,
        error: "Failed to generate logo",
      },
      {
        status: 500,
      },
    )
  }
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This